import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import IconFont from '@/components/IconFont'
import png_zanwu from '@/resource/png_zanwu.png'
import { useEffect } from 'react'
import PageLoading from '@/components/Global/PageLoading'
import { resumeTypeMap } from '@/const'
import { formateMoney } from '@/utils'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { getUserInfo, userInfo, jobList, getUserJobRel, loading } = store
    /** 填写意向 */
    const handleAdd = () => {
        const { platform_access_token, mid_domain, open_key } = userInfo || {}
        let callbackUrl = encodeURIComponent(window.location.origin + `/#/resume/choose`)
        window.location.href = `${mid_domain}/job-center/intended-position/index?token=${platform_access_token}&callback=${callbackUrl}&openKey=`
    }

    /** 制作简历 */
    const makeResume = (bizCode: string) => {
        const { platform_access_token, mid_domain, open_key } = userInfo || {}
        let callbackUrl = encodeURIComponent(window.location.origin + `/#/resume/choose`)
        window.location.href = `${mid_domain}/job-center/my-resume?token=${platform_access_token}&callback=${callbackUrl}&bizCode=${bizCode}&single=1&openKey=`
    }

    /** 预览简历 */
    const viewResume = (bizCode: string, fileUrl: string) => {
        const { platform_access_token, mid_domain, open_key } = userInfo || {}
        let callbackUrl = encodeURIComponent(window.location.origin + `/#/resume/choose`)
        window.location.href = `${mid_domain}/job-center/my-resume/resume-preview?token=${platform_access_token}&callback=${callbackUrl}&bizCode=${bizCode}&pdfUrl=${fileUrl}&showEdit=1&openKey=`
    }

    useEffect(() => {
        document.title = '选择求职意向'
        getUserJobRel()
        getUserInfo()
        function visibleChange() {
            console.log(document.visibilityState)
            if (document.visibilityState === 'visible') {
                getUserJobRel()
                getUserInfo()
            }
        }
        document.addEventListener('visibilitychange', visibleChange)
        return () => {
            document.removeEventListener('visibilitychange', visibleChange)
        }
    }, [])

    if (loading) {
        return <PageLoading />
    }

    return (
        <div className={styles.container}>
            {jobList.length > 0 ? (
                <div className={styles.resume_wrapper}>
                    <div className={styles.resume_title}>你想为哪个意向制作简历？</div>
                    <div className={styles.resume_tips}>不同的职位对简历关注的重点不一致，快来为不同的意向制作专属简历吧！</div>
                    <div className={styles.resume_list}>
                        {jobList.map((item: any) => {
                            return (
                                <div key={item.code} className={styles.resume_item}>
                                    <div className={styles.resume_title}>
                                        <span>{item.capacityName}</span>
                                        {!item?.fileName ? (
                                            <span className={styles.resume_make} onClick={() => makeResume(item.code)}>
                                                制作简历 <IconFont type="icon-zuojiantou" />
                                            </span>
                                        ) : (
                                            <span className={styles.resume_make} onClick={() => viewResume(item.code, item.fileUrl)}>
                                                {item.fileName}
                                            </span>
                                        )}
                                    </div>
                                    <div className={styles.resume_row}>
                                        {resumeTypeMap.get(Number(item.type))}
                                        {Number(item.type) !== 2 && (
                                            <>
                                                <span className={styles.line} />
                                                {formateMoney(item.minSalary)} ~ {formateMoney(item.maxSalary)}
                                            </>
                                        )}
                                    </div>
                                    <div className={styles.resume_row}>
                                        {item.cityName}
                                        <span className={styles.line} />
                                        {item.industryName}
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            ) : (
                <div className={styles.resume_blank_wrapper}>
                    <img src={png_zanwu} className={styles.resume_blank_img} />
                    <div className={styles.resume_blank_tips}>
                        当前还没有设置求职意向
                        <br />
                        快去添加吧～
                    </div>
                    <div className={styles.resume_add_btn} onClick={handleAdd}>
                        去添加
                    </div>
                </div>
            )}
        </div>
    )
})
